/* eslint-disable */ 
<template>
  <div id="app">
    <baidu-map ref="bdMap" class="map" :center="center" :zoom="zoom" :map-click="true" :dragging="true" :scroll-wheel-zoom="true" :continuous-zoom="true" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <bm-info-window :show="infoShow"  :message='infoWindow.contents' :position='infoWindow.position'  :closeOnClick="false" :title="infoWindow.title" @close="infoWindowClose">{{infoWindow.contents}}</bm-info-window>
            <bm-marker @click="infoWindowOpen(item)" v-for="item in markers" :ref="item.termid" :key="item.termid" :position="item.bmPoint" :autoLocation="true" animation="BMAP_ANIMATION_BOUNCE" :icon="icon">
            </bm-marker>
            <bm-marker :position="position" :dragging="false">
              <bm-label content="河南工业贸易职业技术学院" labelStyle="{color: 'red', fontSize : '14px'}" :offset="{width: -60, height: 30}"/>
            </bm-marker> 
             <bm-copyright anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :copyright="[{id: 1, content: '© 2018 河南工业贸易职业技术学院'}]"> </bm-copyright>
    </baidu-map>
    <span> 选择线路：<select name="selected"><option value="all"> 全部</option><option value="east"> 东线</option><option value="west"> 西线</option></select>
        缩放： {{ zoom }} 经度: {{ center.lng }} 纬度： {{ center.lat }}
    </span>
    <router-view/>
  </div>
</template>
<script>
export default {
  components: {},
  name: 'App',
  data() {
    return {
      start: false,
      timeOut: '',
      interval: 4000,
      reqNum: 0,
      center: { lng: 113.691749, lat: 34.637407 },
      zoom: 15,
      position: { lng: 113.691749, lat: 34.637407 },
      infoShow: false,
      infoWindow: {
        // show: false,
        title: 'title 111',
        contents:
          'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        position: { lng: 113.54080257159486, lat: 34.73981145598515 }
      },
      icon: {
        url: 'https://www.sky200.com/resource/icon/all.png',
        size: { width: 28, height: 28 },
        offset: { width: -84, height: 0 }
      },
      markers: [
        {
          termid: 1,
          Speed: 0,
          bmPoint: { lng: 113.691749, lat: 34.637407 },
          memo: '备注',
          telephone: '电话',
          deviceName: '设备名称'
        }
      ]
    }
  },
  computed: {},
  mounted() {
    this.$nextTick(function() {
      this.start = true
      this.getListIng()
      this.getDevice()
    })
  },
  methods: {
    handler({ BMap, map }) {
      // this.zoom = 15
      // this.center.lng = 116.404
      // this.center.lat = 39.915
      console.log('handler')
    },
    syncCenterAndZoom(e) {
      const { lng, lat } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    },
    infoWindowClose(e) {
      this.infoShow = false
    },
    infoWindowOpen(e) {
      this.infoShow = !this.infoShow
      this.infoWindow.position = e.bmPoint
      this.infoWindow.title = e.deviceName
      this.infoWindow.contents = e.memo
    },
    clear() {
      alert(' clear')
    },
    getDevice() {
      let _this = this
      this.axios({
        method: 'post',
        url: '/loc'
      })
        .then(function(response) {
          console.log(response.data)
          if (response.data.code === 200) {
            _this.markers = response.data.data
          }
        })
        .catch(function(response) {
          console.log(response)
        })
    },
    getListIng() {
      // 这里是一个http的异步请求
      let _this = this
      this.reqNum++
      this.axios({
        method: 'post',
        url: '/loc'
      })
        .then(function(response) {
          console.log(response.data)
          if (response.data.code === 200) {
            _this.markers = response.data.data
          }
        })
        .catch(function(response) {
          console.log(response)
        })
      if (this.start) {
        let _this = this
        this.timeOut = setTimeout(() => {
          _this.getListIng()
        }, _this.interval)
      } else {
        this.timeOut = ''
      }
    }
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 1px;
}
.map {
  width: 100%;
  height: 500px;
}
</style>
